<form class="layui-form" action="">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="sex">
                    <option value="">请选择性别</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" id="searchDate" placeholder="yyyy-MM-dd" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索</button>
            </div>
        </div>
    </div>

</form>


<table id="usertable" lay-filter="usertable"></table>


<script>
    layui.use(function(){
        var table = layui.table;

        var $ = layui.$;

        var form = layui.form;

        var laydate = layui.laydate;

        // 渲染表单元素
        form.render();

        // 渲染日期组件
        laydate.render({
            elem: '#searchDate'
        });


        //监听搜索表单的提交事件
        form.on('submit(searchBtn)', function (data) {
            console.log(data.field);
            // 让数据表格中的数据根据查询条件重新加载
            table.reload('usertable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //第一个实例
        table.render({
            elem: '#usertable'
            ,url: '/user/getallbypagehelper' //数据接口
            ,page: true //开启分页
            ,toolbar:'#toolbarDemo'
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true}
                ,{field: 'name', title: '用户名'}
                ,{field: 'sex', title: '性别'}
                ,{field: 'password', title: '密码'}
                ,{field: 'birthday', title: '生日'}
                ,{field: 'registTime', title: '注册日期', sort: true}
                ,{field: 'photopath', title: '头像路径'}
                ,{fixed: 'right', title:'操作', toolbar: '#user-edit-bar'}
            ]]
        });


        //头工具栏事件
        table.on('toolbar(usertable)', function(obj){
            switch(obj.event){
                case 'exportAll':
                    $.ajax({
                        url: '/user/export',
                        method: 'get',
                        success: function (result) {
                            // 服务器端接口把文件生成后，返回文件名
                            console.log(result.data);
                            // 根据返回的文件名去下载文件
                            window.location.href = "/download?filename="+result.data;
                        }
                    });
                    break;
                case 'addUser':
                    openEditWindow(null);
                    break;
                case 'deleteUser':
                    var data = table.checkStatus('usertable').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            });
                            $.ajax({
                                url: '/user/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.code==1) {
                                        table.reload('usertable', {});
                                    } else {
                                        alert(result.msg);
                                    }
                                    layui.layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(usertable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }

            }
        });


        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/user/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });

        // 自定义 用于弹出新增和修改表单的函数
        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html():$('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layer) {
                    layer.load();
                    console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/user/" + (data == null ? 'add' : 'update'),
                        //  url: '/sys/customer/update',
                        data: data == null ?$("#user-add-form").serialize():$("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.code==1) {
                                table.reload('usertable', {});
                                layui.layer.close(index);
                            } else {
                                alert(result.msg)
                            }
                            layui.layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    form.render();
                    //日期
                    laydate.render({
                        elem: '#birthday'
                    });
                    laydate.render({
                        elem: '#registTime'
                    });
                    laydate.render({
                        elem: '#birthday1'
                    });
                    laydate.render({
                        elem: '#registTime1'
                    });
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }
                }
            });
        }

    });
</script>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon">&#xe654;</i>增加</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteUser"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="exportAll"><i class="layui-icon">&#xe640;</i>全量导出</button>
        <button type="button" class="layui-btn layui-btn-sm" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>
</script>


<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday"  id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday"  id="birthday1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

    </form>
</script>


<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>
